<template>
	<div class="header">
		<div class="container">
			<div class="container-fluid">
				<div class="row">
				    <div class="col-xs-6 text-left">
			    		<div class="pull-left text-right">
				    		<img width="58px" height="58px" src="~static/img/TA-logo.png" class="headerLogo"/>
				    	</div>
				    	<div class="pull-left pl10">
				    		<p class="p1">Zero-marginal Cost Hub</p>
				    		<P class="p2">零边际成本枢纽</P>
				    	</div>
					    <div class="clearfix"></div>
				    </div>
				    <div class="col-xs-6 text-center">
				    	<div class="dropdown pull-right ml50 yy">
						        <a href="#" class="xx" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ><span v-text="lang"></span><span class="caret"></span></a>
						        <ul class="dropdown-menu">
						            <li @click="selectLang('ch')"><a href="#">{{$t('lang.ch')}}</a></li>
						            <li @click="selectLang('en')"><a href="#">{{$t('lang.en')}}</a></li>
						            <!--<li @click="selectLang(3)"><a href="#">日语</a></li>
						            <li role="separator" class="divider"></li>
						            <li @click="selectLang(4)"><a href="#">韩语</a></li>-->
						        </ul>
						</div>
				    	<ul class="nav nav-pills">
						    <li class="pull-right"><a href="##">登录</a></li>
						    <li class="pull-right"><a href="##">TA UC</a></li>
							<li class="dropdown pull-right">
						        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">关于 TA<span class="caret"></span></a>
						        <ul class="dropdown-menu">
									<li><router-link to="/line">路线图</router-link></li>
						            <li><router-link to="/TA-book">白皮书</router-link></li>
						            <li><router-link to="/team">团队</router-link></li>
						            <li role="separator" class="divider"></li>
						            <li><router-link to="/plan">TALabs 千人计划</router-link></li>
						        </ul>
						    </li>
						    <li class="dropdown pull-right">
						        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">TA-APP<span class="caret"></span></a>
						        <ul class="dropdown-menu">
						            <li><router-link to="/TA-APP">TA-APP</router-link></li>
						            <li><router-link to="/chat">群聊</router-link></li>
						            <li><router-link to="/circulation">C2C流通交易</router-link></li>
						            <li role="separator" class="divider"></li>
						            <li><router-link to="/wallet">钱包</router-link></li>
						        </ul>
						    </li>
						    <li class="dropdown pull-right">
						        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">TAN <span class="caret"></span></a>
						        <ul class="dropdown-menu">
						            <li><router-link to="/TAN-Network2">TAN-Network</router-link></li>
						            <li><router-link to="/TA-Consensus">TA共识</router-link></li>
						            <li role="separator" class="divider"></li>
						            <li><router-link to="/governance">治理</router-link></li>
						        </ul>
						    </li>
						    <li class="pull-right">
								<router-link to="/">{{$t('nav.index')}}</router-link>
							</li>
							<div class="clearfix"></div>
				    	</ul>
				    </div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
	    data () {
		    return {
		    	lang:'中文'
		    }
	    },
	    mounted () {
		  	$('.nav li').on("click",function(){
		  		$('.nav li').find('a.dropdown-toggle').css({"color":"#fff"})
		  		if($(this).find('a.dropdown-toggle')){
		  			$(this).find('a.dropdown-toggle').css({"color":"#428bca"})
		  		}else{
		  			$('.nav li').find('a.dropdown-toggle').css({"color":"#fff"})
		  		}
		  	})
	    },
	    methods : {
	        selectLang(p){
	        	this.$i18n.locale=p;
	        	if(p=='ch'){
	        		this.lang=this.$t('lang.ch');
	        	}else if(p=='en'){
	        		this.lang=this.$t('lang.en');
//	        	}else if(p==3){
//	        		this.lang='日语'
//	        	}else if(p==4){
//	        		this.lang='韩语'
	        	}
	        	
	        }
	    }
    }
</script>

<style scoped>
	.header{padding: 10px 0;width: 100%;position: absolute;top: 0;left: 0;z-index: 999999999;}
	.p1{color: #fff;text-align: left;font-size: 14px;margin:7px 0 3px 0;}
	.p2{margin: 0;color: #fff;text-align: left;letter-spacing: 8.5px;}
	.headerLogo{width:52px;height:40px;margin-top:5px;}
	.nav li a{color: #fff;padding:19px 15px;background: initial;}
	.nav li .dropdown-menu a{color: #333;}
	.nav li a:hover{background: initial;padding:19px 15px;}
	.nav .open a{background: initial;}
	.nav li a.nuxt-link-exact-active.nuxt-link-active{color: #428bca;}
	.yy{color: #fff;background: initial;height: 58px;line-height: 58px;}
	.yy a.xx{color: #fff;text-decoration: none;}
</style>
